{% extends "base/base.html" %}

{% comment %}

 Copyright 2013 - Tom Alessi

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and 
 limitations under the License.

{% endcomment %}

{% block content %}

<form method="POST" name="incident" action="/admin/incident">
{% csrf_token %}

<div class="row">
  {# This is a large-3 side nav #}
  {% include "admin/side_nav.html" %}

  <div class="large-9 columns">

    <div class="row">
      <div class="large-12 columns">
        <h1>Create Incident</h1>
        <p>To create a new incident, complete the relevant fields below.  Once an incident is created, the dashboard screen will immediately be updated.</p>
        <hr>
      </div>
    </div>
    
    {# This is a row consisting of 12 columns that will display all messages passed in the request #}
    {% include "admin/messages.html" %}

    <div class="row">
      <div class="large-3 columns">
        <div class="row">
          <div class="large-12 columns">
            <span class="radius secondary label">Start Date/Time</span><br>
            <div class="sublabel_container"><span class="sublabel">Enter the incident start date/time.</span></div>
          </div>
        </div>
        <div class="row">
          <div class="large-12 columns {% if form.s_date.errors %}error{% endif %}">
            <input type="text" name="s_date" id="s_date" class="date" placeholder="Enter date" value="{% if form.s_date.data %}{{form.s_date.data}}{% endif %}"/>
            {% if form.s_date.errors %}
            <span class="err">{% for error in form.s_date.errors %}{{error}}<br>{% endfor %}<br></span>
            {% endif %}  
          </div>
        </div>
        <div class="row">
          <div class="large-12 columns {% if form.s_time.errors %}error{% endif %}">
            <input type="text" name="s_time" id="s_time" class="date" placeholder="Enter time" value="{% if form.s_time.data %}{{form.s_time.data}}{% endif %}"/>
            {% if form.s_time.errors %}
            <span class="err">{% for error in form.s_time.errors %}{{error}}<br>{% endfor %}<br></span>
            {% endif %} 
          </div>
        </div>
      </div>
      
      <div class="large-3 columns">
        <div class="row">
          <div class="large-12 columns">
            <span class="radius secondary label">End Date/Time</span><br>
            <div class="sublabel_container"><span class="sublabel">Enter the incident end date/time (if already resolved).</span></div>
          </div>
        </div>
        <div class="row">
          <div class="large-12 columns {% if form.e_date.errors %}error{% endif %}">
            <input type="text" name="e_date" id="e_date" class="date" placeholder="Enter date" value="{% if form.e_date.data %}{{form.e_date.data}}{% endif %}"/>
            {% if form.e_date.errors %}
            <span class="err">{% for error in form.e_date.errors %}{{error}}<br>{% endfor %}<br></span>
            {% endif %}  
          </div>
        </div>
        <div class="row">
          <div class="large-12 columns {% if form.e_time.errors %}error{% endif %}">
            <input type="text" name="e_time" id="e_time" class="date" placeholder="Enter time" value="{% if form.e_time.data %}{{form.e_time.data}}{% endif %}"/>
            {% if form.e_time.errors %}
            <span class="err">{% for error in form.e_time.errors %}{{error}}<br>{% endfor %}<br></span>
            {% endif %} 
          </div>
        </div>
      </div>
      
      <div class="large 6 columns"></div>
    
    </div>

    <div class="spacer_medium"></div>

    <div class="row">
      <div class="large-12 columns">
        <span class="radius secondary label">Incident Description</span>
        &nbsp;<b><span id="description_counter" class="counter"></span></b>
        <div class="sublabel_container"><span class="sublabel">Enter a complete description of the incident.</span></div>
      </div>
    </div>

    <div class="row">
      <div class="large-12 columns {% if form.description.errors %}error{% endif %}">
        <textarea id="description" name="description" placeholder="Enter incident description" maxlength="1000">{% if form.description.data %}{{form.description.data}}{% endif %}</textarea>
        {% if form.description.errors %}
        <br><span class="err">{% for error in form.description.errors %}{{error}}<br>{% endfor %}<br></span>
        {% endif %}
      </div>
    </div>

    <div class="spacer_medium"></div>

    <div class="row">
      <div class="large-12 columns">
        <span class="radius secondary label">Email</span><br>
        <div class="sublabel_container"><span class="sublabel">Select the checkbox to broadcast an email to the specified recipient when this incident form is saved.{% if not email_enabled %}  This option is currently disabled because global email notifications are disabled - enable them <a href="/admin/email_config">here</a>.{% endif %}</span></div>
      </div>
    </div>

    <div class="row">
      <div class="large-12 columns">
        <label><input type="checkbox" {% if not email_enabled %}disabled{% endif %} name="broadcast" {% if form.broadcast.data %}checked{% endif %} />&nbsp;Broadcast Email On Submit</label>
        <select name="email_id" class="email" {% if not email_enabled %}disabled{% endif %}>
          {% if not email_enabled %}
            <option disabled selected>-- Email Functionality Disabled --</option>
          {% else %}
            <option disabled selected>Select Email</option>
          {% endif %}
         {% for email in emails %}
          {% if form.email_id.data|slugify == email.id|slugify %}
          <option value="{{email.id}}" {% if email_enabled %}selected="true"{% endif %}>{{email.email}}</option>
          {% else %} 
          <option value="{{email.id}}">{{email.email}}</option>
          {% endif %}
         {% endfor %}
        </select>
        {% if form.broadcast.errors %}
        <br><span class="err">{% for error in form.broadcast.errors %}{{error}}<br>{% endfor %}<br></span>
        {% endif %}
      </div>
    </div>

    <div class="spacer_medium"></div>

    <div class="row">
      <div class="large-12 columns">
        <span class="radius secondary label">Services Impacted</span><br>
        <div class="sublabel_container"><span class="sublabel">Select all services that are impacted by this incident.  After the incident is created, additional services can be added, if required.</span></div>
      </div>
    </div>

    <div class="row">
      <div class="large-12 columns">
        {% if services %}
          {% for row in services %}
            {# See if this service was previously selected and this is a failed form submit #}
            <label><input type="checkbox" name="service" value="{{row.id}}" {% if row.id|slugify in affected_svcs %}checked{% endif %} />
            {{row.service_name}}</label>
          {% endfor %}
          {% if form.service.errors %}
          <span class="err">{% for error in form.service.errors %}{{error}}<br>{% endfor %}<br></span>
          {% endif %}
        {% else %}
          <span class="err">No services defined, please <a href="/admin/services">add</a> some.</span>
        {% endif %}
      </div>
    </div>

    <div class="spacer_small"></div>

    <div class="row">
      <div class="large-6 columns">
        <input type="submit" class="small button" value="submit"/>
      </div>
    </div>
 
  </div>
</div>

</form>



<script type="text/javascript">

   // Date Pickers and Submit
   $(function() {

      //Start Date
      $("#s_date").datepicker({dateFormat: 'yy-mm-dd'});

      //Start Time
      $("#s_time").timepicker({
          hourGrid: 4,
          minuteGrid: 10
      });

      //End Date
      $("#e_date").datepicker({dateFormat: 'yy-mm-dd'});

      //End Time
      $("#e_time").timepicker({
          hourGrid: 4,
          minuteGrid: 10
      });
   });

  // Textarea counters
  $("#description").keyup(function(){
    $("#description_counter").text("Characters remaining: " + (1000 - $(this).val().length));
  });

</script>

{% endblock %}



